<template>
  <view class="pageLayout">
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="MyForm"
      labelWidth="150rpx"
      :labelStyle="labelStyle"
    >
      <view class="base_info">
        <u-form-item
          label="退款链接"
          prop="customerResourceLinkID"
          borderBottom
          @click="showLinkPicker = true"
        >
          <myPicker
            :list="linkList"
            :show.sync="showLinkPicker"
            @close="closeNotPicker"
            keyName="linkAmount"
            v-model="form.customerResourceLinkID"
            idName="value"
            :inputAlign="'right'"
            :iconSize="'24rpx'"
            :fontSize="'24rpx'"
            @confirm="changeLink"
            placeholder="请选择链接"
            :showIcon="false"
          ></myPicker>
        </u-form-item>
        <u-form-item borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">凭证</view>
          <custom-upload
            v-model="fileList"
            :max-count="5"
            @change="handleFileChange"
          />
        </u-form-item>
        <u-form-item labelPosition="top" prop="customerRemark" borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">客户原因</view>
          <u--textarea
            v-model="form.customerRemark"
            border="none"
            height="50"
            placeholder="请输入客户原因"
          ></u--textarea>
        </u-form-item>
        <u-form-item labelPosition="top" prop="remark" borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">搭配师原因</view>
          <u--textarea
            v-model="form.remark"
            border="none"
            height="50"
            placeholder="请输入搭配师原因"
          ></u--textarea>
        </u-form-item>
      </view>
    </u--form>
    <view class="btn_width">
      <u-button
        class="btn"
        :loading="loading"
        @click="submitForm"
        size="small"
        shape="circle"
        color="#a22d27"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
        >确定</u-button
      >
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>
  <script>
import store from "../../store/index";
import myPicker from "@/components/myPicker";
import tagPicker from "@/components/tagPicker";
import customUpload from "@/components/customUpload.vue";
import mytoast from "@/components/mytoast.vue";
import {
  commitCustomerResourceLinkRefund,
  queryRefundLinkSelect,
} from "@/api/customer/index";
export default {
  components: {
    myPicker,
    tagPicker,
    customUpload,
    mytoast,
  },
  data() {
    return {
      // imgUrl: "https://www.yinyaoit.com",
      id: "",
      showLinkPicker: false, //链接状态
      showLinkTypePicker: false, //链接类型
      showPayTypePicker: false, //链接类型
      showServiceTypePicker: false, //服务类型
      showLevelPicker: false, //SA分级
      showNotPicker: false, //签约结果
      showPicker: false, //
      isFillIn: false,
      loading: false,
      fileList: [],

      tagList: [
        { name: "需跟进", id: "需跟进", customerResourceTagLevel: "Record" },
        { name: "已添加微信", id: "已添加微信", key: "hasWeChat" },
        { name: "无效客资", id: "无效客资", key: "isInvalid" },
        { name: "高意向", id: "高意向", key: "isHignIntention" },
      ], // 标签列表
      linkList: [],
      labelStyle: {
        "font-size": "24rpx",
      },
      fontSize: "24rpx",
      inputAlign: "right",
      form: {
        remark: "",
        customerRemark: "",
        refundProvePath: "",
        customerResourceLinkID: "",
      },
      selectedItems: [],
      rules: {
        customerRemark: [
          {
            type: "string",
            required: true,
            message: "请输入客户原因",
            trigger: ["blur", "change"],
          },
        ],
        customerResourceLinkID: [
          {
            type: "string",
            required: true,
            message: "请选择需要退款的链接",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 图片上传反馈
     * @param files 当前文件列表
     */
    handleFileChange(files) {
      console.log("当前文件列表:", files);
    },
    /**
     * 标签选择回调
     * @param value 选择的标签
     */
    handleTagConfirm(value) {
      console.log(value, "handleTagConfirm");
      let keyList = [];
      value.forEach((item) => {
        if (item.hasOwnProperty("key")) {
          keyList.push(item.key);
        }
      });
      this.tagList.map((item) => {
        if (!keyList.includes(item.key)) {
          this.form[item.key] = false;
        }
      });
      console.log(keyList, "keyList");

      this.selectedItems = value;
    },
    /**
     * 自定义标签添加
     * @param value 添加的标签
     */
    addTag(value) {
      console.log(value, "addTag");
      let obj = {
        name: value.tag,
        id: value.tag,
        customerResourceTagLevel: value.customerResourceTagLevel,
      };
      this.tagList.push(obj);
      this.selectedItems.push(obj);
    },
    /**
     * 链接状态
     */
    changeLink(val) {
      console.log(val, "changeLink");
    },
    // /**
    //  * 获取客户信息
    //  */
    // getInfo() {
    //   queryCustomerResourceChangeLink({ customerResourceID: this.id }).then(
    //     (res) => {
    //       console.log(res.data, "res.data");
    //       this.form = res.data;
    //       if (res.data.linkProvePaths) {
    //         this.fileList = [
    //           {
    //             path: res.data.linkProvePaths,
    //             url: this.imgUrl + "/" + res.data.linkProvePaths,
    //             status: "success",
    //           },
    //         ];
    //       }
    //     }
    //   );
    // },
    /**
     * 表单提交
     */
    async submitForm() {
      if (this.fileList.length == 0) {
        uni.showToast({
          title: "请上传凭证",
          icon: "none",
          duration: 1500,
        });
        return;
      }
      let action = await this.$refs.MyForm.validate();
      if (action) {
        // return;
        let imgArr = this.fileList.map((item) => {
          return item.url;
        });
        let data = {
          ...this.form,
          refundProvePath: imgArr.toString(),
        };
        console.log(data, "data");
        // return;
        commitCustomerResourceLinkRefund(data)
          .then((res) => {
            uni.showToast({ title: "提交成功", icon: "none" });
            uni.navigateBack();
          })
          .catch((e) => {
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 3000,
              position: "center",
            });
          });
        console.log(this.form, "this.form");
      } else {
        uni.showToast({ title: "请完善表单", icon: "none" });
        return false;
      }
    },
    /**
     * 未签约原因选择器
     */
    closeNotPicker() {
      this.$nextTick(() => {
        this.showNotPicker = false;
        this.showLinkPicker = false;
        this.showLinkTypePicker = false;
        this.showPayTypePicker = false;
        this.showServiceTypePicker = false;
        this.showLevelPicker = false;
      });
    },
    /**
     * 标签选择器
     */
    handleConfirm(val) {
      this.$nextTick(() => {
        this.showPicker = false;
      });
    },
    /**
     * 获取链接列表
     */
    getRefundList() {
      let data = {
        customerResourceID: this.id,
      };
      queryRefundLinkSelect(data).then((res) => {
        console.log(res.data, "res.data");
        this.linkList = res.data.map((item) => {
          return {
            ...item,
            ...item.extensios,
          };
        });
      });
    },
  },
  onLoad(options) {
    this.id = options.Id;
    // this.getInfo();
    this.getRefundList();
  },
  onShow() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.MyForm.setRules(this.rules);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
  <style>
page {
  background-color: #f5f7fb;
}
</style>
  
  <style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
.base_info {
  background-color: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.labelStyle {
  margin-bottom: 24rpx;
}
.submit-container {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f7fb;
}
.btn_width {
  width: 60%;
  margin: 60rpx auto;
}
</style>
  